<template>
    <view class="content">

        <view class="area-box">

            <view class="checkBox">
                <view class="pr20">是否上传征信</view> <u-switch v-model="need"></u-switch>
            </view>


            <textarea maxlength="100" v-model="content" :placeholder="need?'请输入备注':'请输入不传征信的原因'"></textarea>


            <view class="pt20 pb20" v-if="need">
                <view class="pb20">请上传</view>
                <view class="fw" style="gap: 20rpx;">
                    <image src="/static/up.png" class="img" @click="upImg"></image>
                    <view class="img" v-for="i,j of list">
                        <view class="close fc bgf" style="border-radius: 50%;">
                            <image src="/static/images/icon_cross.png" style="width: 36rpx;height: 36rpx;"
                                @click.stop="del(i,j)"></image>
                        </view>
                        <image :src="i.docUrl" class="img" @click="showImg(list,j)"></image>
                    </view>
                </view>
            </view>




        </view>

        <div class="common-btn">
            <button class="cu-btn block bg-green margin-tb-sm lg" @click="submit">保存</button>
        </div>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                items: [
                    { value: 2, name: '不上传', checked: true },
                    { value: 1, name: '上传' },
                ],
                item: '',
                content: '',
                need: true,
                list: [],
            }
        },
        onLoad(o) {
            this.item = this.getS(`activeCustomerDetail`)
            if (this.item.invArr) {
                this.list = this.item.invArr
            }


            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
        },
        methods: {
            del(i, j) {
                console.log('删除征信图片', i);
                api.removeInv({
                    creInvDocIds: [i.creInvDocId] //JSON.stringify()
                }).then(r => {
                    if (r.code == 200) {
                        this.list.splice(j, 1)
                    } else {
                        this.toast(`删除失败`)
                    }
                })
            },
            showImg(urls, current, ) {
                urls = urls.map(i => i.docUrl)
                uni.previewImage({
                    urls,
                    current,
                });
            },
            upImg() {
                uni.chooseImage({
                    count: 999,
                    success: (r) => {
                        uni.showLoading()
                        let len = r.tempFilePaths.length
                        let succ_n = 0
                        for (let i of r.tempFilePaths) {
                            let filePath = i
                            uni.uploadFile({
                                url: `https://www.jyjkyqhl.com:7778/app/common/upload`,
                                filePath,
                                name: 'file',
                                success: (r) => {
                                    succ_n++
                                    console.log(r, JSON.parse(r.data));
                                    let docUrl = JSON.parse(r.data).url
                                    api.invDocAdd({
                                        crmCreInvId: this.item.crmCreInvId,
                                        docUrl
                                    }).then(r => {
                                        this.list.push(r.data)
                                        if (succ_n == len) {
                                            uni.hideLoading()
                                        }
                                    })
                                },
                                complete: (e) => {
                                    console.log('eee', e);
                                    uni.hideLoading()
                                }
                            })
                        }
                    }
                })
            },
            switch1Change(e) {
                console.log(e);
            },
            async submit() {
                if (this.need && this.list.length == 0) return this.toast(`请上传图片`)
                if (!this.need && !this.content) return this.toast(`请输入不上传征信的原因`)
                if (!this.need) { //设置不传征信
                    let res = await api.invedit({
                        "crmCreInvId": this.item.crmCreInvId,
                        "creInvStatus": "0",
                        "creInvStr": this.content,
                    })
                }
                uni.showModal({
                    content: `确定提交征信吗?`,
                    success: (r) => {
                        if (r.confirm) {
                            api.isCreInv({
                                crmCreInvId: this.item.crmCreInvId,
                                isCreInvStatus: 5,
                                "refuseMsg": this.content,
                            }).then(r => {
                                this.toast(`提交成功`)
                                setTimeout(_ => {
                                    uni.navigateBack({ delta: 1 })
                                }, 1800)
                            })
                        }
                    }
                })

            },
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
    }

    .checkBox {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        switch {
            margin-left: 20rpx;
        }
    }

    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .area-box {
            margin-top: 20upx;
            padding: 20upx 24upx;
            background: #fff;

            textarea {
                width: 100%;
                height: 200upx;
                border: 1px solid #f7f7f7;
                border-radius: 8upx;
                padding: 20upx;
            }
        }

    }

    .img {
        width: 220rpx;
        height: 220rpx;
        position: relative;

        .close {
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 6rpx;
            top: 6rpx;
            z-index: 999;
        }
    }
</style>